<template>
  <router-layout>
    <div class="myPrize">
      <div class="content-box">
        <div class="prize">
          <Nodata v-if="isNoData"></Nodata>
          <van-list v-else v-model="loading" :finished="finished" @load="onLoad" :offset="0">
            <van-cell v-for="item in activeDataList" :key="item.id">
              <div class="prize-list van-hairline--bottom">
                <div class="left">
                  <img v-bind:src="item.item_path" alt>
                  <P class="name">{{item.item_name}}</P>
                </div>
              </div>
              <div class="time">
                <p>有效日期：{{item.create_time}}</p>
              </div>
            </van-cell>
          </van-list>
        </div>
      </div>
    </div>
  </router-layout>
</template>
<script>
import { listMyDrowItem } from "@/api/drawMob";
import Nodata from "../public/nodata/Nodata"; // 导入暂无数据组件
import TitleItem from "../../components/public/title/title";
export default {
  name: "MyPrize",
  components: { Nodata, TitleItem },
  computed: {
    activeDataList: function () {
      return this.dataList.filter(function (item) {
        return !item.islucky
      })
    }
  },
  data() {
    return {
      status: 1,
      medal: 2,
      total: "",
      isNoData: false,
      loading: false,
      finished: false,
      listQuery: {
        current: 1,
        limit: 5,
        company_id: localStorage.getItem("companyId") || 1
      },
      dataList: []
    };
  },
  methods: {
    async initList() {
      let query = Object.assign({}, this.listQuery);
      let res = await listMyDrowItem(query);
      if (res.data.status == 100) {
        this.dataList = res.data.data.rows;
        this.total = res.data.data.results;
        if (!this.total) {
          this.isNoData = true;
        }
      }
      this.loading = false;
      if (res.data.data.results <= this.dataList.length) {
        this.finished = true;
      }
    },
    onLoad() {
      setTimeout(() => {
        this.listQuery.limit += 2;
        this.initList();
      }, 1000);
    }
  },
  created: function() {
    this.initList();
  }
};
</script>
<style lang="scss" scoped>
@import "MyPrize";
</style>
